@import '../../style/var.scss';

van-notice-bar {
  position: fixed;
  top: 1;
  left: 0;
  width: 100%;
  z-index: 9999;
  transform: translateZ(999px);
}

.container {
  padding: 48rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC',
    'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.van-calendar {
  .van-button {
    width: 100%;
  }
}

$border-radius-container: 10px;
$height-container: 320rpx;
$height-left: 240rpx;
$margin-container-right-left: 36rpx;

$background-color-cell: #f5f5f6;
$color-cell-number: #ff0000b8;

.date-container {
  box-sizing: border-box;
  border: 1px solid $color-border-main-blue;
  background: $color-main-blue;
  border-radius: $border-radius-container;
  display: flex;
  width: 100%;
  height: $height-container;
  color: #fff;
  align-items: center;
  overflow: hidden;

  .date-left {
    height: $height-left;
    width: $height-left;
    box-sizing: border-box;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: ($height-container - $height-left)/ 2 $margin-container-right-left;
    overflow: hidden;
    background: $background-color-cell;
    cursor: pointer;

    .date-status {
      position: absolute;
      left: 32rpx;
      top: 32rpx;
      font-size: 16px;
      color: #fff;
    }

    .date-number {
      font-size: 44px;
      transform: translateY(-10rpx);
      color: #3d3d46c7;
    }

    .date-term {
      position: absolute;
      bottom: 28rpx;
      left: 50%;
      transform: translateX(-50%);
      color: #555;
      font-size: 16px;
    }
  }

  // 调休
  .date-left-1 {
    background: rgba(165, 228, 126, 0.6);

    .date-status {
      color: #eee;
    }

    .date-number {
      color: #fff;
    }

    .date-term {
      color: #eee;
    }
  }

  // 补班
  .date-left-2 {
    background: #333333e0;

    .date-status {
      color: #fff;
    }

    .date-number {
      color: #fff;
    }

    .date-term {
      color: #fff;
    }
  }

  .date-right {
    background: rgb(100, 148, 237);
    height: $height-left;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: right;
    margin: ($height-container - $height-left)/ 2 $margin-container-right-left ($height-container - $height-left)/ 2 0;
    cursor: pointer;
  }
}

.worker-img {
  width: 640rpx;
  margin: -10rpx auto 24rpx auto;
  height: 300rpx;
  position: relative;
}

.expectation {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 48rpx;
}

.van-popup,
van-popup,
van-picker,
.van-picker {
  z-index: 9999;
  transform: translateZ(9999px);

  .van-transition {
    z-index: 9999;
    transform: translateZ(999px);
  }
}
